<template>
  <div>
    <router-view></router-view>
    <!--  分割线-->
    <el-divider></el-divider>
    <!-- 添加律师资料按钮 -->
    <el-button type="primary" plain @click="insertHrEmp">添加律师资料</el-button>
    <!--  批量删除按钮-->
    <el-button type="primary" plain @click="deletesHrEmp"> 批量删除</el-button>
    <!--  导出按钮-->
    <!--  <el-button type="primary" plain @click="deletesSelection">导出</el-button>-->
    <div style="height: 20px"></div>
    <!--高级查询-->
    <el-form :inline="true" :model="formInline" :label-position="labelPosition" label-width="80px"
             class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.empName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.empPhone" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.empPosition" placeholder="所内身份"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getHrEmp">查询</el-button>
      </el-form-item>
    </el-form>
    <!--查询员工信息-->
    <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="empPosition"
          label="身份">
      </el-table-column>
      <el-table-column
          prop="empName"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="empPhone"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="empEntrydate"
          label="入职时间">
      </el-table-column>
      <el-table-column
          prop="empContEnddate"
          label="合同到期时间">
      </el-table-column>
      <el-table-column
          prop="empWorkstatus"
          label="在职状态">
        <template scope="scope">
          <p v-if="scope.row.empWorkstatus === 'Y'">在职</p>
          <p v-if="scope.row.empWorkstatus ==='N'">不在职</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="empBirthdate"
          label="出生日期">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" plain>
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="selectEmp(scope.row.id)">查看详细信息</el-dropdown-item>
              <el-dropdown-item @click.native="updateEmp(scope.row.id)">修改员工信息</el-dropdown-item>
              <el-dropdown-item @click.native="getHrWorkhistory(scope.row.id)">查看工作经历</el-dropdown-item>
              <el-dropdown-item @click.native="getHrDegree(scope.row.id)">查看教育经历</el-dropdown-item>
              <el-dropdown-item @click.native="deleteHrEmp(scope.row.id)">删除员工</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>
<!--    分页-->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="[2, 4, 6, 8]"
        :total="pageData.total"
        :page-size="formInline.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
    <!--  添加教育经历-->
    <el-dialog title="添加教育经历" :visible.sync="degreeInsert">
      <el-form :label-position="labelPosition" label-width="100px" :model="degreeInsertForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期:">
              <el-date-picker type="date" placeholder="选择日期" v-model="degreeInsertForm.degreeStartdate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期:">
              <el-date-picker type="date" placeholder="选择日期" v-model="degreeInsertForm.degreeEnddate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="毕业院校:">
              <el-input v-model="degreeInsertForm.degreeSchool"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主修专业:">
              <el-input v-model="degreeInsertForm.degreeMajor"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学历:">
              <el-input v-model="degreeInsertForm.degreeEducation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学位:">
              <el-input v-model="degreeInsertForm.degreeDegrees"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书编号:">
              <el-input v-model="degreeInsertForm.degreeCrednum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否全日制:">
              <el-select v-model="degreeInsertForm.degreeFulltime" style="width: 100%;" placeholder="请选择">
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" plain @click="degreeInsertButton">确定提交</el-button>
      <!--  分割线-->
      <el-divider></el-divider>
      <!--    关闭按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="degreeInsert = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!--查看教育经历-->
    <el-dialog title="查看教育经历" :visible.sync="degreeDialog">
      <el-button type="text" icon="el-icon-circle-plus" @click="degreeInsert = true">添加教育经历</el-button>
      <el-table :data="degreeData" border style="width: 100%">
        <el-table-column width="100" property="id" label="序号"></el-table-column>
        <el-table-column width="100" property="degreeStartdate" label="开始日期"></el-table-column>
        <el-table-column width="100" property="degreeEnddate" label="结束日期"></el-table-column>
        <el-table-column width="100" property="degreeSchool" label="毕业院校"></el-table-column>
        <el-table-column width="100" property="degreeMajor" label="主修专业"></el-table-column>
        <el-table-column width="100" property="degreeEducation" label="学历"></el-table-column>
        <el-table-column width="100" property="degreeDegrees" label="学位"></el-table-column>
        <el-table-column width="100" property="degreeCrednum" label="证书编号"></el-table-column>
        <el-table-column width="100" property="degreeFulltime" label="是否全日制">
          <template scope="scope">
            <p v-if="scope.row.degreeFulltime === 'Y'">是</p>
            <p v-if="scope.row.degreeFulltime ==='N'">否</p>
          </template>
        </el-table-column>
        <el-table-column property="degreeSite" label="所在地"></el-table-column>
      </el-table>
    </el-dialog>
    <!--  添加工作经历-->
    <el-dialog title="添加工作经历" :visible.sync="workhistoryInsert">
      <el-form :label-position="labelPosition" label-width="100px" :model="workhistoryInsertForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期:">
              <el-date-picker type="date" placeholder="选择日期" v-model="workhistoryInsertForm.workhistoryStartdate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期:">
              <el-date-picker type="date" placeholder="选择日期" v-model="workhistoryInsertForm.workhistoryEnddate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作单位:">
              <el-input v-model="workhistoryInsertForm.workhistoryWorkunit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作职务:">
              <el-input v-model="workhistoryInsertForm.workhistoryJobPosition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作类别:">
              <el-select v-model="workhistoryInsertForm.workhistoryWorktype" style="width: 100%;" placeholder="请选择">
                <el-option label="律师" value="律师"></el-option>
                <el-option label="检察官" value="检察官"></el-option>
                <el-option label="法官" value="法官"></el-option>
                <el-option label="法律" value="法律"></el-option>
                <el-option label="公务员" value="公务员"></el-option>
                <el-option label="警察" value="警察"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位性质:">
              <el-select v-model="workhistoryInsertForm.workhistoryWorknature" style="width: 100%;" placeholder="请选择">
                <el-option label="党委" value="党委"></el-option>
                <el-option label="政府" value="政府"></el-option>
                <el-option label="人大" value="人大"></el-option>
                <el-option label="政协" value="政协"></el-option>
                <el-option label="公安" value="公安"></el-option>
                <el-option label="检察院" value="检察院"></el-option>
                <el-option label="法院" value="法院"></el-option>
                <el-option label="司法行政机关" value="司法行政机关"></el-option>
                <el-option label="群团组织" value="群团组织"></el-option>
                <el-option label="企业" value="企业"></el-option>
                <el-option label="社会团体" value="社会团体"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所在地:">
              <el-input v-model="workhistoryInsertForm.workhistorySite"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" plain @click="workhistoryInsertButton">确定提交</el-button>
      <!--  分割线-->
      <el-divider></el-divider>
      <!--    关闭按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="workhistoryInsert = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!--工作经历弹框-->
    <el-dialog title="查看工作经历" :visible.sync="workhistoryDialog">
      <!-- Form -->
      <el-button type="text" icon="el-icon-circle-plus" @click="workhistoryInsert = true">添加工作经历</el-button>
      <el-table :data="gridData" border style="width: 100%">
        <el-table-column property="id" label="序号"></el-table-column>
        <el-table-column property="workhistoryStartdate" label="开始日期"></el-table-column>
        <el-table-column property="workhistoryEnddate" label="结束日期"></el-table-column>
        <el-table-column property="workhistoryWorkunit" label="工作单位"></el-table-column>
        <el-table-column property="workhistoryJobPosition" label="工作职务"></el-table-column>
        <el-table-column property="workhistoryWorktype" label="工作类别"></el-table-column>
        <el-table-column property="workhistoryWorknature" label="单位性质"></el-table-column>
        <el-table-column property="workhistorySite" label="所在地"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HrEmp",
  data() {
    return {
      pageData:{},// 存储返回的分页数据
      id: "",
      hrEmpId: "",
      tableData: [],
      workhistoryInsert: false,
      degreeInsert: false,
      workhistoryDialog: false,
      degreeDialog: false,
      hrEmp: [],
      gridData: [],
      degreeData: [],
      //每个表单依次在lineformsets（来自modelb）中显示连接到该对象的所有对象
      formInline: {
        "chaxun":"1", // 标识操作哪个get
        pageId:1,
        pageNum:2,
      },
      workhistoryInsertForm: {},
      degreeInsertForm: {},
      //表单左对齐
      labelPosition: 'left',
      //批量删除
      sels: [],//选中的值显示
    }
  },
  created() {
    this.getHrEmp();
  },
  methods: {
    //查询员工信息
    getHrEmp() {
      this.$http
          .get("hrEmp",
              {params: this.formInline})
          .then((res) => {
            this.tableData = res.data.data.list;
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //删除员工信息
    deleteHrEmp(ids) {
      this.$http.delete(`hrEmp/${ids}`)
          .then(() => {
                this.$notify({
                  type: "success",
                  message: "删除已离职员工"
                }),
                    this.getHrEmp()
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //获取选中的数据
    handleSelectionChange(sels) {
      this.sels = sels;
    },
    //批量删除
    deletesHrEmp() {
      var ids = this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
      this.deleteHrEmp(ids);
    },
    //查询教育经历
    getHrDegree(id) {
      this.hrEmpId = id // 把选中值给变量hrEmpId
      this.degreeDialog = true;
      this.$http
          .get(`hrDegree/${id}`)
          .then((res) => {
            this.degreeData = res.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加教育经历
    degreeInsertButton() {
      this.$http.post(`hrDegree/${this.hrEmpId}`, this.degreeInsertForm)
          .then(
              this.$notify({
                type: "success",
                message: "添加成功"
              }),
              this.degreeInsert=false,
              this.degreeDialog=false
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //检查工作经历
    getHrWorkhistory(id) {
      this.hrEmpId = id // 把选中值给变量hrEmpId
      this.workhistoryDialog = true;
      this.$http
          .get(`hrWorkhistory/${id}`)
          .then((res) => {
            this.gridData = res.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加工作经历
    workhistoryInsertButton() {
      this.$http.post(`hrWorkhistory/${this.hrEmpId}`, this.workhistoryInsertForm)
          .then(
              this.$notify({
                type: "success",
                message: "添加成功"
              }),
              this.workhistoryInsert=false,
              this.workhistoryDialog=false
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //带参数跳转页面
    selectEmp(id) {
      this.$router.push({name: 'HrEmpSelect', params: {id: id}})
    },
    updateEmp(id) {
      this.$router.push({name: 'HrEmpUpdate', params: {id: id}})
    },
    //绑定添加按钮
    insertHrEmp() {
      //跳转添加页面
      this.$router.push({name: 'HrEmpInsert'})
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val; //动态改变
      this.getHrEmp();
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum= val;
      this.getHrEmp();
    },
  }
}
</script>

<style scoped>

</style>